<template>
  <div class="demo1">
    <header>
      <swiper :list="swiperList" height="140px"></swiper>
    </header>
    <main class="flex box_center">
      <aside class="aside">
        <van-sidebar v-model="active" @change="onChange" style="width:3rem;">
          <van-sidebar-item v-for="item in imitate" :key="item" :title="item.title" />
        </van-sidebar>
      </aside>
      <article class="article">
        <div class="float_r mt-10 mb-10">
          <div class="x_y_center topTips">
            <span class="mr-10">只看我够换滴...</span>
            <van-switch v-model="checked" size="20px" active-color="#ee0a24" inactive-color="#fff" @change="switchChange" />
          </div>
        </div>
        <div class="ar_body">
          <div class="card card_shop txt_center" v-for="item in initShop" :key="item">
            <div>
              <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" width="100%" height="130px">
            </div>
            <div class="title">{{item.title}}</div>
            <div class="title title_b mt-5">
              <div class="tips float_l"><span class="title red">{{item.integral}}</span> 魅力点</div>
              <div class="tips float_r">原价:￥{{item.price}}</div>
            </div>
          </div>
          <van-empty :description="imitate[tabIndex].title+'没有可以兑换的喔'" v-show="initShop.length==0" />
        </div>
      </article>
    </main>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
import swiper from "@/components/Swiper";
export default {
  name: "list",
  components: {
    swiper,
  },
  setup() {
    const state = reactive({
      swiperList: [
        {
          imgUrl:
            "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-mate40.png",
        },
        {
          imgUrl:
            "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner1.png",
        },
        {
          imgUrl:
            "https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner2.png",
        },
      ], // 轮播图列表
    });
    const active = ref(0);
    const tabIndex = ref(0);
    const onChange = (index) => {
      console.log(imitate.value[index]);
      tabIndex.value = index
      initShop.value = imitate.value[index].children
      switchChange(checked.value)
    };
    let myImitate = 30
    const switchChange = (bool) => {
      if(!bool) return initData()
      // 剔除不够兑换的
      let list = []
      initShop.value.forEach(item => {
        if (myImitate>item.integral) list.push(item)
      });
      initShop.value = list
    };
    const checked = ref(false);
    let imitate = ref([])//模拟tab栏
    let initShop = ref([])//商品列表
    const initData = () => {
      const data = [
        {
          title:'「1k+好评」',
          children:[
            {
              title:'淘米水护发套装',
              integral:99,
              price:10,
            }
          ]
        },
        {
          title:'「上新啦」',
          children:[
            {
              title:'水精灵护发精油',
              integral:29,
              price:10,
            }
          ]
        }
      ]
      let over = {
        title:'「全部」',
        children:[]
      }
      data.forEach(item => over.children.push(...item.children));
      data.unshift(over)
      imitate.value = data
      initShop.value = data[tabIndex.value].children
    }
    switchChange()
    return {
      ...toRefs(state),
      active,
      onChange,
      tabIndex,
      checked,
      initData,
      imitate,
      initShop,
      switchChange,
    };
  },
};
</script>
<style scoped lang="less">
.demo1 {
  .box_center{
    height: calc(100vh - 140px - 1.33333rem);
    .aside{
      overflow-y: auto;
      overflow-x: hidden;
      background-color: #f7f8fa;
      border-right: 1px solid #ebedf0;
    }
    .article{
      width: calc(100vw - 80px);
      .topTips{
        width: 200px;
        font-size: 14px;
        color: #777;
        font-family: "楷体";
      }
      .ar_body{
        height: calc(100% - 42px);
        width: 100%;
        overflow-y: auto;
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        .card_shop{
          width: 46%;
          margin: 0 5px 10px;
          box-sizing: border-box;
          padding: 5px;
          // max-height:140px;
          display: inline-block;
          .title{
            font-size: 14px;
            color: #000;
            text-align: left;
            font-weight: 100;
          }
          .title_b{
            color: #999;
            .tips{
              font-size: 12px;
              .red{
                color: red;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }

  
}
</style>
